import React, { Component } from 'react'
import {View, Text, Image} from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import Friends from './HomeComponent/Friends'
import News from './HomeComponent/News'
import Profile from './HomeComponent/Profile'
import Quanzi from './HomeComponent/Quanzi'
export default class Home extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedTab:"交友"
    }
  }
  render() { 
    return (
      <View style={{flex:1}}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === '交友'}
            title="交友"
            renderIcon={() => <Image source={require('../assets/img/tabbarhomeselect.png')}/>}
            renderSelectedIcon={() => <Image source={require('../assets/img/tabbarhomeselect2.png')} />}
            badgeText="1"
            onPress={() => this.setState({ selectedTab: '交友' })}>
            <Friends {...this.props}/>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === '圈子'}
            title="圈子"
            renderIcon={() => <Image source={require('../assets/img/tabbarexplore-2.png')}/>}
            renderSelectedIcon={() => <Image source={require('../assets/img/tabbarexplore.png')} />}
            
            onPress={() => this.setState({ selectedTab: '圈子' })}>
            <Quanzi {...this.props} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === '消息'}
            title="消息"
            renderIcon={() => <Image source={require('../assets/img/icnotification.png')}/>}
            renderSelectedIcon={() => <Image source={require('../assets/img/tabbar-icon-xiaoxi-default.png')} />}
            
            onPress={() => this.setState({ selectedTab: '消息' })}>
            <News {...this.props} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === '我的'}
            title="我的"
            renderIcon={() => <Image source={require('../assets/img/TABbar-fill.png')}/>}
            renderSelectedIcon={() => <Image source={require('../assets/img/TABbar-fill-2.png')} />}
            
            onPress={() => this.setState({ selectedTab: '我的' })}>
            <Profile {...this.props} />
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    )
  }
}
